<template>
	<view class="user-box">
		<image class="bg" :src="pic"></image>
		<view class="setbtn" @click="openSet"><text class="icon shezhi1"></text></view>
		<view class="userLogin" @click="login">
			<view>
				<!-- #ifdef MP -->
				<view class="portrait" v-if="userInfo.id > 0">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<image v-else class="portrait" src="/static/missing-face.png"></image>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image class="portrait" src="/static/missing-face.png"></image>
				<!-- #endif -->
			</view>
			<view>
				<!-- #ifdef MP -->
				<view class="username" v-if="userInfo.id > 0">
					<open-data type="userNickName"></open-data>
				</view>
				<text v-else class="username">点击登录</text>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text v-if="userInfo.id > 0" class="username">{{userInfo.phone}}</text>
				<text v-else class="username">点击登录</text>
				<!-- #endif -->
			</view>
		</view>
		<view class="userInfo">
			<view class="item">
				<text class="num">{{userInfo.integral || '0'}}</text>
				<text>积分</text>
			</view>
			<view class="item">
				<text class="num">{{userInfo.favorite || '0'}}</text>
				<text>收藏</text>
			</view>
			<view class="item">
				<text class="num">{{userInfo.follow || '0'}}</text>
				<text>关注</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		pic: {
			type : String,
			default : '/static/user-bg.jpg'
		}
	},
	data() {
		return {
			userInfo : {}
		}
	},
	mounted() {
		this.loadUser()
	},
	methods: {
		async loadUser() {
			this.userInfo = await this.$api('GET','user')
		},
		openSet() {
			//#ifdef MP
			uni.openSetting({
				success(res) {
					console.log(res.authSetting)
				}
			})
			//#endif
		},
		login(){
			if(!this.userInfo.id){
				this.$goto('/pages/login')
			}
		}
	}
}
</script>

<style lang='scss'>
	.user-box{
		height: 300upx;
		padding: 80upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.setbtn{
			position: absolute;
			z-index: 2;
			top:150upx;
			right:50upx;
			width: 50upx;
			height: 50upx;
			text{
				color:#ffffff;
				font-size:32upx;
			}
		}
		.userLogin{
			height: 180upx;
			display:flex;
			align-items:center;
			position:relative;
			z-index: 1;
			.portrait{
				overflow:hidden;
				display: block;
				width: 130upx;
				height: 130upx;
				border:5upx solid #fff;
				border-radius: 50%;
			}
			.username{
				overflow:hidden;
				display: block;
				font-size: $font-lg + 6upx;
				color: #ffffff;
				margin-left: 20upx;
			}
		}
		.userInfo{
			width: 100%;
			display:flex;
			position:relative;
			z-index: 1;
			border-radius: 20upx;
			background: #ffffff;
			.item{
				display:flex;
				justify-content: space-around;
				align-content: center;
				align-items:center;
				flex-direction: column;
				width: 100%;
				height: 100upx;
				font-size: $font-sm;
				color: #75787d;
			}
			.num{
				font-size: $font-lg;
				color: $font-color-dark;
			}
		}
	}
</style>